const colorItem = (title, valueKey) => {
  return {
    title,
    type: 'colorPicker',
    value: {
      get({ data }: any) {
        return data[valueKey]
      },
      set({ data }: any, value: string) {
        data[valueKey] = value
      }
    }
  }
}
export default {
  '@init'({ style }) {
    style.width = '100%'
    style.height = '100%'
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': {
    items: [
      {
        title: '地图样式',
        type: 'Select',
        options: [
          { value: 'normal', label: '标准(normal)' },
          { value: 'dark', label: '幻影黑(dark)' },
          { value: 'light', label: '月光银(light)' },
          { value: 'whitesmoke', label: '远山黛(whitesmoke)' },
          { value: 'fresh', label: '草色青(fresh)' },
          { value: 'grey', label: '雅士灰(grey)' },
          { value: 'graffiti', label: '涂鸦(graffiti)' },
          { value: 'macaron', label: '马卡龙(macaron)' },
          { value: 'blue', label: '靛青蓝(blue)' },
          { value: 'darkblue', label: '极夜蓝(darkblue)' },
          { value: 'wine', label: '酱籽(wine)' }
        ],
        value: {
          get({ data }: any) {
            return data.mapStyle
          },
          set({ data }: any, value: string) {
            data.mapStyle = value
          }
        }
      },
      {
        title: '区域颜色',
        items: [colorItem('', 'color1'), colorItem('', 'color2'), colorItem('', 'color3'), colorItem('', 'color4'), colorItem('', 'color5'), colorItem('', 'color6'), colorItem('', 'color7'), colorItem('hover颜色', 'hoverColor')]
      },
      {
        title: '标签样式',
        catelog: '默认',
        options: [{ type: 'font', config: { disableTextAlign: true } }],
        target: `.amp-charts-label-style`
      }
    ]
  }
}
